<template>
  <div id="complaintSuggestionPage">
    <div class="tipsDiv">
      {{ tips }}
    </div>

    <div class="bottomDiv">
      <div class="bottomTitle">内容</div>
      <textarea
        class="textarea"
        placeholder="请描述一下您的投诉内容,限制在100字以内"
        v-model="remark"
        maxlength="100"
      >
      </textarea>

      <div class="bottomTitle">请上传图片</div>

      <van-uploader
        v-model="fileList"
        multiple
        :max-count="3"
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-delete="beforeDelete"
      >
        <div class="cameraDiv">
          <img :src="camera" class="cameraImg" />
          <div class="cameraTitle">{{ imageStr }}</div>
        </div>
      </van-uploader>
    </div>
    <div class="submitOrderDiv">
      <div class="button" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import {
  isPhoneNum,
  addImagePrefix,
  removeImagePrefix,
  isWeixinBrowser
} from "@/utils/utils";
import { api_complaintSuggestion , api_suggestionTips} from "@/service/api/user";
import { api_upLoad } from "@/service/api/upLoad";
let vm = null;

export default {
  name: "ComplaintSuggestionPage",
  data() {
    return {
      rightArrow: require("@/images/icon/order/right_arrow.png"),
      camera: require("@/images/icon/order/camera.png"),
      remark: "",
      inRequest: false,
      // 文件上传列表
      fileList: [],
      urlfileList: [],
      tips:"快通公司不断提升自己，服务客户，开通了专项投诉建议通道，您可在下方提出自己的投诉与建议。"
    };
  },
  computed: {
    imageStr() {
      console.log(this.fileList);

      if (this.fileList.length == 0) {
        return "添加图片";
      } else if (this.fileList.length == 1) {
        return "1/3";
      } else if (this.fileList.length == 2) {
        return "2/3";
      } else {
        return "图片上限";
      }
    }
  },
  methods: {
    requestData() {
        api_suggestionTips()
        .then(res => {
            this.tips = res.data.tips;
        })
        .catch(error => {
          this.$toast(error.message);
        });
    },
      beforeRead(){
          this.$toast.loading(
              {
                  message:'图片读取中'
              }
          );
          return true;
      },
    afterRead(files) {
      // urlfileList 确保列表中都显示的是 远程图片  filelist中会默认添加本地图片 所以要覆盖一下

        this.$toast.loading(
            {
                duration:5000,
                message:'图片上传中'
            }
        );

        if (files instanceof Array) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          api_upLoad(file.file)
            .then(res => {
              this.urlfileList.push({ url: addImagePrefix(res.data.url) });
              this.fileList = this.urlfileList;
            })
            .catch(error => {
              this.fileList = this.urlfileList;
              this.$toast(error.message);
            });
        }
      } else {
        api_upLoad(files.file)
          .then(res => {
            this.urlfileList.push({ url: addImagePrefix(res.data.url) });
            this.fileList = this.urlfileList;
          })
          .catch(error => {
            this.fileList = this.urlfileList;
            this.$toast(error.message);
          });
      }
    },

    beforeDelete(file) {
      for (var i = 0; i < this.urlfileList.length; i++) {
        var fileUrl = this.urlfileList[i].url;
        if (fileUrl === file.url) {
          this.urlfileList.splice(i, 1);
          this.fileList = this.urlfileList;
          return;
        }
      }
    },
    submit() {
      if (this.inRequest) {
        this.$toast("正在提交请稍后");
        return;
      }

      if (this.remark === "") {
        this.$toast("请填写投诉内容");
        return;
      }

      var urlList = "";
      for (var i = 0; i < this.fileList.length; i++) {
        var file = this.fileList[i];
        console.log(file.url);
        if (i == 0) {
          urlList += removeImagePrefix(file.url);
        } else {
          urlList = urlList + "," + removeImagePrefix(file.url);
        }
      }

      let data = {
        content: this.remark,
        imgUrls: urlList
      };

      this.inRequest = true;

      api_complaintSuggestion(data)
        .then(res => {
          this.inRequest = false;
          this.remark = "";
          this.fileList = [];
          this.urlfileList = [];
          //replace

          this.$router.replace({
            name: "resultPage",
            query: {
              title: "投诉建议提交成功",
              subTitle1: "我们会在48小时内联系您，",
              subTitle2: " 请保持手机畅通。"
            }
          });
        })
        .catch(error => {
          this.$toast(error.message);
          this.inRequest = false;
        });
    }
  },
  created() {
    vm = this;
    this.requestData();
  }
};
</script>

<style scoped>
#complaintSuggestionPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;
  background-color: white;
}
.tipsDiv {
  padding: 0px 20px;
  padding-top: 1rem;

  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}
.headerDiv {
  padding: 0 20px;
  width: 100%;
  background-color: white;
}
.middleDiv {
  background-color: white;

  padding: 0 20px;
  width: 100%;
  margin-top: 0.8rem;
}

.bottomDiv {
  background-color: white;
  padding: 0 20px;
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10rem;
  /*align-items: center;*/
}
.listCellDiv {
  border-bottom: 0.5px solid #f0f1f5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 1.3rem 0;
}
.listCellDivNoButtomPadding {
  padding-bottom: 1px;
}
.listCellNoBottom {
  border-bottom: 0.5px solid white;
}
.leftDiv {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.rightDiv {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-end;
}
.rightDivColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.rightDivRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.title {
  height: 0.95rem;
  font-size: 0.95rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 0.95rem;
  flex-shrink: 0;
}
.subtitle {
  height: 1.1rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 0.95rem;
}
.areaSubTitle {
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 0.95rem;
  text-align: right;
}
.rightarrow {
  width: 0.43333333333333335rem;
  height: 0.7333333333333333rem;
  margin-bottom: 0.2rem;
}

.bottomTitle {
  margin: 1rem 0;
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}
.cameraDiv {
  width: 5rem;
  height: 5rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.26666666666666666rem;
  border: 1px solid rgba(240, 241, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cameraImg {
  width: 1.0666666666666667rem;
  height: 1.0666666666666667rem;
  margin-bottom: 0.3333333333333333rem;
}
.cameraTitle {
  margin-top: 0.3333333333333333rem;
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.1rem;
}

.submitOrderDiv {
  border-top: solid 0.5px #f0f1f5;

  background-color: white;
  padding: 0 20px;
  width: 100%;
  height: 4.2666666666666666rem;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.submitOrderTitleDiv {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-end;
}
.yugu {
  width: 2.4rem;
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.1rem;
}
.y {
  width: 0.4666666666666667rem;
  height: 1.2rem;
  font-size: 1.2rem;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: rgba(242, 62, 84, 1);
  line-height: 1.2rem;
}
.price {
  width: 2.2333333333333334rem;
  height: 2rem;
  font-size: 2rem;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: rgba(242, 62, 84, 1);
  line-height: 2.4rem;
}
.button {
  width: 10.333333333333334rem;
  height: 2.6666666666666665rem;
  background: #397be6;
  border-radius: 1.6333333333333333rem;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

textarea {
  height: 7rem;
  width: 100%;
  background-color: #f6f8fb;
  padding: 1rem;

  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: #7a8491;

  line-height: 1.2333333333333334rem;
}

textarea::-webkit-input-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}

textarea::-moz-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}
textarea:-ms-input-placeholder {
  height: 2.466666666666667rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}

input {
  text-align: right;
}

input::-webkit-input-placeholder {
  color: #bfc3cd;
}
input::-moz-placeholder {
  color: #bfc3cd;
}
input::-ms-input-placeholder {
  color: #bfc3cd;
}

.noContent {
  color: #bfc3cd;
}
.hasContent {
  color: rgba(122, 132, 145, 1);
}
.redText {
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(242, 62, 84, 1);
  line-height: 1.1rem;

  margin-top: 1.5rem;
}

.vanField {
  /*font-size: 0.9rem;*/
  /*font-family: PingFangSC-Regular, PingFangSC;*/
  /*font-weight: 400;*/
  /*line-height: 0.95rem;*/
  /*text-align: right;*/
}

.leftDiv >>> .van-cell {
  padding: 0;
  padding-left: 20px;
}

.leftDiv >>> textarea {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: #7a8491;

  line-height: 1.2333333333333334rem;
}

.leftDiv >>> textarea::-webkit-input-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}

.leftDiv >>> textarea::-moz-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}
.leftDiv >>> textarea:-ms-input-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
}
.uploadDivNoinput {
}
.uploadDivNoinput >>> input {
  display: none;
}
.tagTitle {
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.2333333333333334rem;
  margin-top: 0.5rem;
}
.tagDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tagItem {
  font-size: 0.8333333333333334rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2rem;

  padding: 0.3rem 0.5rem;
  margin-right: 0.46rem;
  margin-top: 0.5rem;

  background-color: #f0f1f5;
}
</style>
